<template>
    <ElDialog
        v-if="popShow"
        v-model="popShow"
        width="540px"
        title="立即购买"
        center
        @close="closePop"
    >
        <div class="px-[30px] py-[15px]" v-loading="isLock">
            <ElForm label-width="80px">
                <!-- <ElFormItem label="充值条数" v-if="type == 'recharge'">
                    <div>{{ order.number }}条</div>
                </ElFormItem> -->
                <slot name="top" v-bind="order" />
                <ElFormItem label="支付金额">
                    <div>¥{{ order.sellPrice }}</div>
                </ElFormItem>
                <ElFormItem label="实付金额">
                    <div class="text-[#FF4141]">¥{{ order.sellPrice }}</div>
                </ElFormItem>
                <ElFormItem label="支付方式">
                    <div
                        v-for="(item, index) in payWayList.list"
                        :key="index"
                        class="flex items-center px-[30px] py-[10px] rounded-lg unactive mr-2"
                        :class="{
                            actived: selectedType == item.id
                        }"
                        @click="handleSelect(item.id)"
                    >
                        <ElImage
                            :src="item.icon"
                            class="h-[24px] w-[24px]"
                        ></ElImage>
                        <div class="ml-[10px]">{{ item.name }}</div>
                    </div>
                </ElFormItem>
            </ElForm>
            <div class="flex justify-center">
                <ElButton type="primary" @click="orderPayFn">确认支付</ElButton>
            </div>
            <WxPayCode ref="wxPayCodePopRef" @popClose="closePop"></WxPayCode>
        </div>
    </ElDialog>
</template>

<script setup lang="ts">
import { ElDialog, ElForm, ElFormItem, ElButton, ElImage } from 'element-plus'
import { getPayWayList, prepay, OrderStatus } from '@/api/pay'
import usePolling from '~~/composables/usePolling'
import feedback from '~~/utils/feedback'
import { useUserStore } from '~~/stores/user'

const popShow = ref(false)
const props = defineProps(['modelValue', 'type', 'redirect'])
const userStore = useUserStore()
const { getUser } = userStore

//支付方式列表
const payWayList: any = ref([])

//订单信息
const order: any = ref({})

//支付参数
const payParam: any = ref({
    from: props.type,
    payWay: ''
})

//微信二维码弹框
const wxPayCodePopRef = ref(null)

//选中的支付方式
const selectedType = ref(0)
//选择支付方式
const handleSelect = (type: number) => {
    selectedType.value = type
    payParam.value.payWay = type
}
const runtimeConfig = useRuntimeConfig()
//订单支付
const orderPay = async () => {
    const data = await prepay({
        scene: order.value.from,
        orderId: order.value.orderId,
        ...payParam.value,
        redirect: `${runtimeConfig.public.baseUrl}${props.redirect}`
    })
    if (selectedType.value == 2) {
        openWxPayCodePop(data)
        start()
    } else if (selectedType.value == 3) {
        const alipayPage = window.open('', '_self')
        alipayPage.document.body.innerHTML = data.config
        alipayPage.document.forms[0].submit()
    }
}

const { lockFn: orderPayFn, isLock } = useLockFn(orderPay)

//微信二维码支付弹框
const openWxPayCodePop = (value) => {
    wxPayCodePopRef.value.open(value)
}

//获取支付方式
const getPaywayList = async () => {
    payWayList.value = await getPayWayList({
        orderId: order.value.orderId,
        from: props.type
    })
    payWayList.value.list.map((item) => {
        if (item.isDefault == 1) {
            handleSelect(item.id)
        }
    })
}

const check = async () => {
    const { payStatus } = await OrderStatus({
        orderId: order.value.orderId,
        from: props.type
    })
    if (payStatus == 1) {
        feedback.alertSuccess('支付成功')
        getUser()
        popShow.value = false
        end()
    }
}

const endCallback = () => {
    popShow.value = false
    feedback.alertWarning('支付超时！')
}

//轮询参数
const { start, end, result } = usePolling(check, {
    totalTime: 60 * 1000,
    callback: endCallback
})
//关闭弹框回调
const closePop = () => {
    end()
}

//打开弹框
const open = (orderMsg: any) => {
    popShow.value = true
    console.log(orderMsg)
    order.value = orderMsg
    getPaywayList()
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.actived {
    border: 1px solid var(--el-color-primary) !important;
}
.unactive {
    border: 1px solid var(--el-bg-color-page);
    background-color: var(--el-bg-color-page);
}
</style>
